<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>O2mation Workbench</title>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script language="javascript" type="text/javascript">
        $.ajaxSetup ({
        cache: false //close AJAX cache
        });

        function refreshNavi(){
            $('#tt').tree({
                url:'/navigator'
            });
        }

        function do_load_ui(html, id){
            var local_frame = document.getElementById("wbeditor");
            local_frame.setAttribute("src", html);
            local_frame.onload = function(){ 
                local_frame.contentWindow.requestComponent(id);
                if(typeof(local_frame.contentWindow.registerNavListener) != 'undefined')
                    local_frame.contentWindow.registerNavListener(refreshNavi);
            } 
        }

        function windowClick(id, text){
            do_load_ui('/ui/' + text, id);
        }

        var currentComponentId;
        function requesetComponentUI(id) {
            currentComponentId = id;
            var http = new XMLHttpRequest();
            var url = '/componentui/' + id;
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                    var data = http.responseText;
                    var jsoncontent = JSON.parse(data);
                    do_load_ui('/ui/' + jsoncontent[0], id);
                    $('#mm4').empty(); 
                    for(i in jsoncontent){
                        name = jsoncontent[i];
                        $('#mm4').menu('appendItem',{
                            text: name,
                            onclick: function(){ 
                                windowClick(id, $(this).text());
                            }
                        });
                    }
                } else {

                }
            }
            http.open("GET", url);
            http.send(null);
        }

        var currentModule;
        function requestModule(record){
            currentModule = record.text;
            $('#tree').tree({
                url:'/module/' + record.text
            });
            setDraggable();
        }

        function handleDrop(e, source){
            var class_name = $(source).find('span').filter('.tree-title').text();
            var local_frame = document.getElementById("wbeditor");
            local_frame.contentWindow.do_create_component(currentComponentId, {'type': currentModule +'.' +class_name});
        }

        function setDraggable(){
            $('#tree').on({
                mouseover: function (e) {
                    var target = e.target;
                    if (target.tagName == 'SPAN') target = target.parentNode;
                    $(target).draggable({
                        revert: true,
                        proxy: 'clone',
                        disabled: false,
                        onBeforeDrag:function(){
                            var p = $('#dropArea');
                            this.mask = $('<div></div>').appendTo('#dropArea');
                            this.mask.css({
                                position:'absolute',
                                zIndex:99999999,
                                background:'#fff',
                                opacity: 0.10,
                                left: p.offset().left,
                                top: p.offset().top,
                                width: p.outerWidth(),
                                height: p.outerHeight()
                            });
                        },
                        onStopDrag:function(){
                            this.mask.remove();
                        }
                    })
                },
                click: function (e) {
                    var target = e.target;
                    if (target.tagName == 'SPAN') target = target.parentNode;
                    if (target.tagName == 'LI') target = $(target).find('div:first')[0];
                    $(this).tree('toggle',target);
                }
            });
        }

        function prepareDrag(node, data) {
             setDraggable();
        }

        function clickMenu(id, name, value){
            var http = new XMLHttpRequest();
            var url = '/menu/' + id;
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){

                } else {

                }
            }
            console.log(value)
            if(value != null && value != 'null')
                value = prompt("Input Value")
            var json = {'name': name, 'value': value}
            http.open("POST", url);
            http.setRequestHeader('content-type', 'application/json');
            http.send(JSON.stringify(json));
        }

        function menuClickNewFolder(id){
            name=prompt("Input component name");
            if(name == null||name.length == 0)
                return
            var http = new XMLHttpRequest();
            var url = '/component?id=' + id + '&name=' + name + '&type=component.Folder';
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                    refreshNavi();
                }
            }
            http.open("POST", url);
            http.send(null);
        }

        function createMenu(e, id){
            var http = new XMLHttpRequest();
            var url = '/menu/' + id;
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                    var data = http.responseText;
                    var jsoncontent = JSON.parse(data);
                    
                    $('#navi-menu').menu('appendItem',{
                        text: 'New Folder',
                        onclick: function(){ 
                            menuClickNewFolder(id);
                        }
                    });

                    actions = jsoncontent['actions'];
                    for(let i in actions){
                        act = actions[i];
                        $('#navi-menu').menu('appendItem',{
                            text: act['name'],
                            onclick: function(){ 
                                clickMenu(id, $(this).text(), act['value']);
                            }
                        });
                    }
                    
                    $('#navi-menu').menu('show',{
                        left: e.pageX,
                        top: e.pageY 
                    });
                } else {

                }
            }
            http.open("GET", url);
            http.send(null);
        }

        $(function (){
            $('#tt').tree({
                onContextMenu: function(e, node){
                    e.preventDefault();
                    $(this).tree('select',node.target);
                    $('#navi-menu').empty(); 
                    createMenu(e, node.id)
                    
                }
            })
        })

    </script>

</head>
<body>
    <div class="easyui-layout" style="cursor:default;position:absolute;top:0px;left:0px;bottom:0px;right:0px;">
        <div data-options="region:'north'" style="height:50px">
            <div class="easyui-panel" style="padding:5px;">
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm0'">File</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Search</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm4'">Windows</a>
            </div>
            <div id="mm0" style="width:150px;">
                <div data-options="iconCls:'icon-undo'">Undo</div>
                <div data-options="iconCls:'icon-redo'">Redo</div>
                <div class="menu-sep"></div>
                <div>Cut</div>
                <div>Copy</div>
                <div>Paste</div>
                <div class="menu-sep"></div>
                <div>
                    <span>Toolbar</span>
                    <div>
                        <div>Address</div>
                        <div>Link</div>
                        <div>Navigation Toolbar</div>
                        <div>Bookmark Toolbar</div>
                        <div class="menu-sep"></div>
                        <div>New Toolbar...</div>
                    </div>
                </div>
                <div data-options="iconCls:'icon-remove'">Delete</div>
                <div>Select All</div>
            </div>
            <div id="mm1" style="width:150px;">
                <div data-options="iconCls:'icon-undo'">Undo</div>
                <div data-options="iconCls:'icon-redo'">Redo</div>
                <div class="menu-sep"></div>
                <div>Cut</div>
                <div>Copy</div>
                <div>Paste</div>
                <div class="menu-sep"></div>
                <div>
                    <span>Toolbar</span>
                    <div>
                        <div>Address</div>
                        <div>Link</div>
                        <div>Navigation Toolbar</div>
                        <div>Bookmark Toolbar</div>
                        <div class="menu-sep"></div>
                        <div>New Toolbar...</div>
                    </div>
                </div>
                <div data-options="iconCls:'icon-remove'">Delete</div>
                <div>Select All</div>
            </div>
            <div id="mm2" style="width:100px;">
                <div>Help</div>
                <div>Update</div>
                <div>About</div>
            </div>
            <div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">
                <p style="font-size:14px;color:#444;">武汉市嘉仪尔科技有限公司</p>
            </div>
            <div id="mm4" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">
            </div>
        </div>
        <div data-options="region:'east',split:true" title="Modules" style="width:200px;">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'north',split:true" style="width:100px;height:300px">
                    <input class="easyui-combobox" name="Modules" style="width:100%;" data-options="
                        url:'/modules',
                        method:'get',
                        valueField:'id',
                        textField:'text',
                        panelHeight:'auto',
                        label: 'Modules:',
                        labelPosition: 'top',
                        onLoadSuccess: prepareDrag,
                        onSelect: function(record){
                            requestModule(record);
                        }
                        ">
                </div>
                <div data-options="region:'south',split:true" style="width:100px;height:300px">
                    <ul class="easyui-tree" data-options=" 
                                url: '/module/component',
                                method: 'get',
                                animate: true,
                                dnd:false
                            " id="tree" ></ul>
                </div>
            </div>
            
        </div>
        <div data-options="region:'west',split:true" title="Navigator" style="width:200px;">
            <div class="easyui-layout" data-options="fit:true">
                    <div class="easyui-panel" data-options="region:'north',split:true, fit:true" style="padding:5px;width:120px;">
                        <ul id="tt" class="easyui-tree" data-options="
                                url: '/navigator',
                                method: 'get',
                                animate: true,
                                onDblClick:function(node){
                                    requesetComponentUI(node.id);
                                    }
                            "></ul>
                    </div>
                    <div id="navi-menu" class="easyui-menu" style="width:140px;">    
                    </div> 
            </div>
        </div>
        <div class="easyui-droppable" data-options="region:'center',title:'Editor', accept: '.tree-node', onDrop: handleDrop" id="dropArea">
            <iframe id="wbeditor"scrolling="auto" width="100%" height="100%">
            </iframe>
        </div>
    </div>
 
</body>
</html>